import { useState } from 'react';
import { addTodo } from '../store/actions/todos';
import { useDispatch } from 'react-redux';

export const TodoHeader = () => {
  // 发action用的
  const dispatch = useDispatch();

  // 实现一个受控组件
  const [txt, setTxt] = useState('敲代码');
  console.log(txt);

  // 键盘事件处理
  const handleAddTodo = (e) => {
    console.log(e);
    // 添加 todo 之前的判断
    // 1 是不是回车
    if (e.keyCode !== 13) return;
    // 2 是不是空串
    if (!txt.trim()) return;
    // 分发action
    dispatch(addTodo(txt));

    // 清空用户输入
    setTxt('');
  };

  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="What needs to be done?"
        value={txt} // 控制表单元素
        onChange={(e) => setTxt(e.target.value)} // 控制表单元素的变化
        onKeyDown={handleAddTodo}
        autoFocus
      />
    </header>
  );
};
